import React, { FC, useEffect, useState } from 'react';
import { BankOutView, BankTable } from '../components';
import { Form, Input, Select, Button, Tabs } from 'antd';
import './index.css';
import CustomerFieldType from './CustomerBasicInfoCard';
import type { ColumnsType } from 'antd/es/table';

interface CustomerFieldType {
  customerNo: string;
  accountNumber: string;
  Currency: string;
};

const CurrencyData = [
  { value: 'CNY', label: '人民币' },
  { value: 'dollar', label: '美元' },
]

const customerInfoList = [
  { label: "名称", value: "张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三" },
  { label: "年龄", value: "李四李四李四李四李四李四四" },
  { label: "爱好", value: "王五王五王五王五王五王五王五王五王五王五王五王五王五王五" },
  { label: "思考", value: "赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六赵六" },
  { label: "图片", value: "事情事情事情事情事情事情事情事情事情事情事情事情事情事情" },
]

const columns: ColumnsType<DataType> = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
];

const data: DataType[] = [
  {
    key: '1',
    name: "zhangsan",
    age: 18,
    address: "Beijing"
  },
  {
    key: '2',
    name: "lisi",
    age: 30,
    address: "shanghai"
  }
];

const columns2: ColumnsType<DataType> = [
  {
    title: "性别",
    dataIndex: "sex"
  },
  {
    title: "爱好",
    dataIndex: "aihao"
  },
  {
    title: "学历",
    dataIndex: "education"
  },
]

const data2: DataType2[] = [
  {
    key: '1',
    sex: "男",
    aihao: "打篮球",
    education: "本科"
  },
  {
    key: '1',
    sex: "女",
    aihao: "打篮球",
    education: "本科"
  }
];


const CustomerBasicInformation: FC = () => {
  const [form] = Form.useForm();
  const [currencyNumber, setCurrencyNumber] = useState('');
  const [currencyList, setCurrencyList] = useState<typeof CurrencyData>()

  useEffect(() => {
    // 后期调用接口
    setCurrencyList(CurrencyData);
  }, [])

  const handleClickSearchBtn = () => {
    form.validateFields().then((values) => {
      alert(JSON.stringify(values));
      console.log(values);
    }).catch(err => {
      console.log(err);
    })
  }

  const onChange = (e: any) => {
    console.log(e, 'e');
  }

  return (
    <BankOutView title="客户基本信息查询">
      <div className='search-view'>
        <Form form={form} className='search-view'>
          <Form.Item<CustomerFieldType>
            className="search-item-input"
            name="customerNo"
            label=""
            rules={[{ required: true, message: '请输入客户号!' }]}
          >
            <Input placeholder='请输入客户号!' />
          </Form.Item>
          <Form.Item<CustomerFieldType>
            name="accountNumber"
            className="search-item-input"
            label=""
            rules={[{ required: true, message: '请输入账号!' }]}
          >
            <Input placeholder='请输入账号!' />
          </Form.Item>
          <Form.Item<CustomerFieldType>
            name="Currency"
            className="search-item-input"
            label=""
            rules={[{ required: true, message: '请选择币种!' }]}
          >
            <Select
              placeholder='请选择币种!'
              style={{ width: 200 }}
              onChange={(e) => setCurrencyNumber(e)}
              options={currencyList}
            />
          </Form.Item>
        </Form>
        <Button type='primary' className='search-btn' onClick={handleClickSearchBtn}>查询</Button>
      </div>
      <div className='info-card'>
        <CustomerFieldType list={customerInfoList} cardItemStyle="8-23" />
      </div>
      <div className='table-view'>
        <Tabs
          onChange={onChange}
          type="card"
          items={[
            {
              label: "账户信息",
              key: "1",
              children: <BankTable
                key={"1"}
                columns={columns}
                data={data}
                paginationInfo={{ total: 120 }}
              />
            },
            {
              label: "其他信息",
              key: "2",
              children: <BankTable
                key={"2"}
                columns={columns2}
                data={data2 as unknown as DataType[]}
                paginationInfo={{ total: 120 }}
              />
            }
          ]}
        />

      </div>
    </BankOutView >
  );
}

export default CustomerBasicInformation